<template>
  <div class="app">
    <el-input
      v-model="input"
      placeholder="请输入内容"
      @change="handleSearch"
    ></el-input>
    <p>{{ tips }}</p>
    <div class="container">
      <item v-for="item in search" :key="item.indx" :item="item"></item>
    </div>
  </div>
</template>

<script>
import item from "./components";
export default {
  data() {
    return {
      input: "",
      search: [],
      tips: "请搜索 先",
    };
  },
  components: { item },
  methods: {
    handleSearch() {
      console.log(this.input);
      var k = this.input.trim();
      if (k) {
        this.$http(`http://47.108.197.28:4000/api/search?keyword=${k}`).then(
          (res) => {
            var search = res.data.res;
            if (search.length != 0) {
              this.search = search;
            }
            if (this.search.length == 0) {
              this.tips = "未搜索到结果";
            } else {
              this.tips = "";
            }
          }
        );
      }
    },
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  margin: auto;
}
.container {margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>